<template>
  <div id="energy-line-bar">
    <div class="energy-line-bar-header">
      <div class="energy-line-bar-header-title">UC</div>
      <div class="energy-line-bar-header-right">
        <div class="right-btn-item" style="color: #00E5FF;">标煤</div>
        <div class="right-btn-item">费用</div>
        <div class="right-img-item"><img :src="settingPng" /></div>
        <div class="right-img-item"><img :src="bigPng" /></div>
      </div>
    </div>
    <div class="energy-line-bar-main">
      
      <div class="energy-line-bar-main-title"></div>
      <div class="energy-line-bar-main-chart" ref="lineBarRef"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EnergyDoubleZhuEchartCmp',
  props:["title"],
  data () {
    return {
      bigPng: require("../../assets/big.png"),
      settingPng: require("../../assets/setting.png"),
      
    }
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts(){
        let myChart = echarts.init(this.$refs.lineBarRef)
        window.addEventListener('resize',() => {
            myChart.resize()
        })
        let option = {
          legend: {
            textStyle: {
              color: '#FFF',
              fontSize: 12,
            },
            itemWidth: 20,
            itemHeight: 10,
            itemGap: 10,
            icon: 'circle',
            padding: [10 ,0,0,0]
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#FFF'
              }
            }
          },
          grid: {
            top: '30px',
            left: '10px',
            right: '10px',
            bottom: '12px',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: ['YTD', '2023-01', '2023-02', '2023-03', '2023-04', '2023-05'],
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                interval: '0',
                color: '#FFF'
              },
              // boundaryGap: false, // x轴两边是否留白
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              min: 0,
              max: 7,
              interval: 1,
              axisLabel: {
                formatter: '{value} ',
                color: '#FFF'
              },
              // 坐标轴分割线
              splitLine: {
                lineStyle: {
                  color: ['#FFF'],
                  opacity: 0.1
                }
              },
            },
            {
              type: 'value',
              name: '',
              min: 0,
              max: 7,
              interval: 1,
              axisLabel: {
                formatter: '{value} ',
                color: '#FFF'
              },
              // 坐标轴分割线
              splitLine: {
                lineStyle: {
                  color: ['#FFF'],
                  opacity: 0.1
                }
              },
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              data: [
                6.2
              ],
              itemStyle: {
                color: '#00FF29',
              },
              barMaxWidth: '20%',
              // showBackground: true,
            },
            {
              name: '目标UC',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              data: [
                '', 3.3, 4, 3.5, 2.2, 4.5
              ],
              itemStyle: {
                color: '#00E5FF',
              },
              barMaxWidth: '20%',
              // showBackground: true,
            },
            {
              name: '实际UC',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              data: [
                '', 2.8, 3.2, 2.6, 1.5, 3.5
              ],
              itemStyle: {
                color: '#FFB300',
              },
              barMaxWidth: '20%',
              // showBackground: true,
            },
          ]
        };
        myChart.setOption(option)
        setTimeout(() => {
            let width = myChart.getWidth()
            if(width && width !== 0){
                let opt = myChart.getOption();
                let grid = opt.grid[0];
                let right = grid.right;
                let left = grid.left;
                right = width*parseFloat(right)/100;
                left = width*parseFloat(left)/100;
                let x = width-left-right;
                option.series[0].label.offset = [x-20,0]
            }
            return option && myChart.setOption(option)
        },200)
    },
  }
}
</script>

<style lang="scss" scoped>
#energy-line-bar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background: rgba(15,47,92,0.2);

  .energy-line-bar-header {
    height: 40px;
    background: rgba(21,56,99,0.4);
    font-size: .12rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .energy-line-bar-header-title {
      margin: 8px 20px;
      font-weight: bold;
      font-size: .225rem;
      font-family: YouSheBiaoTiHei;
      color: #FFFFFF;
      font-style: italic;
    }

    .energy-line-bar-header-right {
      display: flex;
      flex-direction: row;
      margin-right: 15px;

      .right-btn-item {
        font-size: .175rem;
        vertical-align: center; 
        padding: 5px 11px;
        font-family: HarmonyOS_Sans_SC;
        background: rgba(255,255,255,0.14);
        border-radius: 6px;
        margin-right: 10px;
      }

      .right-img-item {
        display: flex;
        align-items: center;
        font-size: .175rem;
        font-family: HarmonyOS_Sans_SC;
        margin-left: 15px;
      }
    }
  }
  .energy-line-bar-main {
    flex: 1;
    display: flex;
    position: relative;

    .energy-line-bar-main-chart {
      flex: 1;
    }
  }
}
</style>
